/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useRef, useEffect } from 'react';
import {

    View,
    Text,
    StatusBar,
    Linking,
    Image
} from 'react-native';
import Svg, {
    Circle,
    Rect,
    Ellipse,
    G,
    TSpan,
    TextPath,
    Path,
    Polygon,
    Polyline,
    Line,
    Use,
    Symbol,
    Defs,
    LinearGradient,
    RadialGradient,
    Stop,
    ClipPath,
    Pattern,
    Mask,
} from 'react-native-svg';

// import colors from './assets/colors.json'
// import pics from './assets/pics.js'


const About = function () {
    return (
        <View style={{ flex: 1, padding: 20 }}>
            <StatusBar />

            <Text style={{ fontSize: 20 }}>CHINESE COLORS{'\n'}{'\n'}</Text>
            <Text style={{ fontSize: 20 }}>数据来源:https://colors.ichuantong.cn{'\n'}</Text>
            <Text style={{ fontSize: 20 }}>Github:https://github.com/zerosoul/chinese-colors{'\n'}</Text>
            <Svg height="50%" width="50%" viewBox="0 0 100 100">
                <Circle
                    cx="50"
                    cy="50"
                    r="45"
                    stroke="blue"
                    strokeWidth="2.5"
                    fill="green"
                />

                <Defs>
                    <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
                        <Stop offset="0%" stopColor="#ff0" stopOpacity="1" />
                        <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
                    </LinearGradient>


                </Defs>
                <Rect
                    x="15"
                    y="15"
                    width="70"
                    height="70"
                    stroke="red"
                    strokeWidth="2"
                    fill="url(#grad)"
                />
            </Svg>


        </View>
    );
};


export default About;
